<template>
  <div class="demo--t-image-preview">
    <h2>t-image-preview</h2>
    <section>
      <div class="q-pa-md" style="max-width: 400px">
        <q-btn
          label="Preview"
          type="button"
          color="primary"
          class="q-mt-md"
          @click="showPreview"
        />
      </div>
    </section>

    <t-image-preview v-model="previewSrc" :src-list="srcList"></t-image-preview>

  </div>
</template>

<script>
import { useQuasar } from '@teld/q-components';
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const $q = useQuasar();

    const srcList = ref([
      'https://dummyimage.com/610x460',
      'https://dummyimage.com/620x760',
      'https://dummyimage.com/630x960',
      'https://dummyimage.com/760x1200',
      'https://dummyimage.com/1024x1800',
      'https://dummyimage.com/2424x640',
    ]);
    const previewSrc = ref(null);
    const showPreview = () => {
      const imgIndex = Math.floor(Math.random() * srcList.value.length);
      console.log(`random index src to show ${imgIndex}`);
      previewSrc.value = srcList.value[imgIndex];
      // previewSrc.value = 'https://dummyimage.com/400x400'
    };



    return {
      srcList,
      previewSrc,
      showPreview,
    };
  },
};
</script>

<style></style>
